<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div style="padding: 10px;">
	
	<!-- add window -->
	<div id="addWindow" class="easyui-window" icon="icon-save" style="width:500px;height:300px;padding:5px;background: #fafafa;" closed="true">
		<div class="easyui-layout" fit="true">
			<div region="center" border="false" style="padding:10px;background:#fff;border:1px solid #ccc;">
				<form class="op-form" id="addForm" name="addForm" method="post">
					<table>
						<tr>
							<td>名称:</td>
							<td>
								<input class="easyui-validatebox" name="name" required="true" validType="length[2,100]">
							</td>
						</tr>
						<tr>
							<td>链接地址:</td>
							<td>
								<input class="easyui-validatebox" name="url" required="false" validType="length[2,100]">
							</td>
						</tr>
						<tr>
							<td>排序号:</td>
							<td>
								<input class="easyui-numberbox" name="orderNO" required="false" min="0">
							</td>
						</tr>
						<tr>
							<td>小图标:</td>
							<td>
								<input class="easyui-validatebox" name="icon" required="false">
							</td>
						</tr>
						<tr>
							<td>状态:</td>
							<td>
								<select id="status" name="status">
									<option value="0">停用</option>
									<option value="1" selected="selected">在用</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>顶层菜单:</td>
							<td>
								<select id="property" name="property">
									<option value="1" selected="selected">是</option>
									<option value="0">否</option>
								</select>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">
				<a id="btnSubmit" href="#" class="easyui-linkbutton" icon="icon-ok" onclick="$('#addForm').submit()">提交</a>
				<a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="addForm.reset()">重置</a>
			</div>
		</div>
	</div>
	
	<!-- operation -->
	<div style="margin:10px;">
		<a href="#" class="easyui-linkbutton" icon="icon-reload" onclick="reload()">刷新</a>
		<a href="#" class="easyui-linkbutton" icon="icon-add" onclick="append()">添加</a>
		<a href="#" class="easyui-linkbutton" icon="icon-back" onclick="$('#tt').datagrid('reload');$('#dataGrid').show();$('#opPanel').panel('close');">返回</a>
	</div>
	
	<!-- menu tree -->
	<ul id="tt2"></ul>
	
</div>

<script type="text/javascript">
	
	jQuery(function($){
		$('#tt2').tree({
			url: 'menu.action?command=getMenuTree',
			animate: true,
			onClick: function(node){
				$(node.target).find('span.tree-hit').trigger('click');
			}
		});
	});
	
	// 添加
	function append(){
		$("#btnSubmit").linkbutton({disabled: false});
		var selectNode = $('#tt2').tree('getSelected');
		if(selectNode == null){
			$('#property option[value='+ 1 +']').attr('selected', true);
		}else{
			$('#property option[value='+ 0 +']').attr('selected', true);
		}
		
		//  显示操作窗口
		$("#addWindow").window({
			title: "添加菜单",
			top: 200,
			// modal: false,
			closed: false,
			onClose: function(){
				addForm.reset();
			}
		});
		
		// 表单校验
		$('#addForm').form({
			onSubmit:function(){
				if($(this).form('validate')){
					$("#btnSubmit").linkbutton({disabled:true});
					ajaxAdd();
				}else{
					return false;
				}
			}
		});
	}
	
	function reload(){
		$('#tt2').tree('reload');
	}
	
	// ajax添加
	function ajaxAdd(){
		var selectNode = $('#tt2').tree('getSelected');
		var actionURL = "menu.action?command=add";
		var params = jQuery("#addForm").dataForAjax().data;
		
		if(selectNode != null){
			params += "&pid="+ selectNode.id;
		}
			
		jQuery.ajax({
			url: actionURL,
			type: "post",
			cache: false,
			data: params,
			success: function(result){
				showMessage(result);
				$("#addWindow").window("close");
				reload();
			}
		});
	}
	
	// 提示信息
	function showMessage(result){
	 	var message = '您的操作失败!';
		if("true" == result){
			message = '您的操作成功!'
		}
		$.messager.show({
			title: '友情提示',
			msg: message,
			timeout: 2500,
			showType: 'slide'
		});
	}
	
</script>